<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>Ext JS 6学习文档–第2章–核心概念 | LErry</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="# 核心概念在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点：  类系统，创建和扩展类  事件  Ext JS 对象的查询  容器  布局     class system(类系统) Ext JS 提供了很多功能，使得它创建和处理类变得简单。以下是在 Ext JS 6 的类系统中的几大组成类：  Ex">
<meta name="keywords" content="extjs,ext,javascript">
<meta property="og:type" content="article">
<meta property="og:title" content="Ext JS 6学习文档–第2章–核心概念">
<meta property="og:url" content="https://www.itchina.top/2018/04/20/Ext JS 6学习文档–第2章–核心概念/index.html">
<meta property="og:site_name" content="LErry">
<meta property="og:description" content="# 核心概念在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点：  类系统，创建和扩展类  事件  Ext JS 对象的查询  容器  布局     class system(类系统) Ext JS 提供了很多功能，使得它创建和处理类变得简单。以下是在 Ext JS 6 的类系统中的几大组成类：  Ex">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/1.png">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/1-1.png">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/1-2.png">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/112.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/113.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/114.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/115.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/116.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/117.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/118.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/119.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/120.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/121.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/122.jpg">
<meta property="og:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/123.jpg">
<meta property="og:updated_time" content="2018-04-25T12:25:55.601Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Ext JS 6学习文档–第2章–核心概念">
<meta name="twitter:description" content="# 核心概念在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点：  类系统，创建和扩展类  事件  Ext JS 对象的查询  容器  布局     class system(类系统) Ext JS 提供了很多功能，使得它创建和处理类变得简单。以下是在 Ext JS 6 的类系统中的几大组成类：  Ex">
<meta name="twitter:image" content="http://www.jeeboot.com/wp-content/uploads/2015/12/1.png">
    

    
        <link rel="alternate" href="/atom.xml" title="LErry" type="application/atom+xml" />
    

    
        <link rel="icon" href="/css/images/shortcut_icon.png" />
    

    <link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/libs/open-sans/styles.css">
    <link rel="stylesheet" href="/libs/source-code-pro/styles.css">

    <link rel="stylesheet" href="/css/style.css">

    <script src="/libs/jquery/2.1.3/jquery.min.js"></script>
    
    
        <link rel="stylesheet" href="/libs/lightgallery/css/lightgallery.min.css">
    
    
        <link rel="stylesheet" href="/libs/justified-gallery/justifiedGallery.min.css">
    
    
    
    


</head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/" id="logo">
                <i class="logo"></i>
                <span class="site-title">LErry</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/.">主页</a>
                
                    <a class="main-nav-link" href="/freebooks">书籍</a>
                
                    <a class="main-nav-link" href="/tags">标签</a>
                
                    <a class="main-nav-link" href="/archives">归档</a>
                
                    <a class="main-nav-link" href="/aboutme">关于</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="/css/images/avatar.png" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/.">主页</a></td>
                
                    <td><a class="main-nav-link" href="/freebooks">书籍</a></td>
                
                    <td><a class="main-nav-link" href="/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/aboutme">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="/css/images/avatar.png" />
            <h2 id="name">LErry Li</h2>
            <h3 id="title">知我者谓我心忧，不知我者谓我何求</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Shanghai, China</span>
            <a id="follow" target="_blank" href="https://github.com/lerry903">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                65
                <span>文章</span>
            </div>
            <div class="article-info-block">
                54
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/lerry903" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="mailto:lerryli@foxmail.com" target="_blank" title="envelope" class=tooltip>
                            <i class="fa fa-envelope"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="http://wpa.qq.com/msgrd?v=3&uin=824444270&site=qq&menu=yes" target="_blank" title="qq" class=tooltip>
                            <i class="fa fa-qq"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="https://weibo.com/5941010376" target="_blank" title="weibo" class=tooltip>
                            <i class="fa fa-weibo"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/atom.xml" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-Ext JS 6学习文档–第2章–核心概念" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            Ext JS 6学习文档–第2章–核心概念
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/2018/04/20/Ext JS 6学习文档–第2章–核心概念/">
            <time datetime="2018-04-19T16:34:21.418Z" itemprop="datePublished">2018-04-20</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/categories/ExtJs/">ExtJs</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link" href="/tags/ext/">ext</a>, <a class="tag-link" href="/tags/extjs/">extjs</a>, <a class="tag-link" href="/tags/javascript/">javascript</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <p>#</p>
<h1 id="核心概念"><a href="#核心概念" class="headerlink" title="核心概念"></a>核心概念</h1><p>在下一章我们会构建一个示例项目，而在这之前，你需要学习一些在 Ext JS 中的核心概念，这有助于你更容易理解示例项目。这一章我们将学习以下知识点：</p>
<ul>
<li>类系统，创建和扩展类 </li>
<li>事件 </li>
<li>Ext JS 对象的查询 </li>
<li>容器 </li>
<li>布局   </li>
</ul>
<p>class system(类系统)</p>
<p>Ext JS 提供了很多功能，使得它创建和处理类变得简单。以下是在 Ext JS 6 的类系统中的几大组成类：</p>
<ul>
<li>Ext </li>
<li>Base </li>
<li>Class </li>
<li>ClassManager </li>
<li>Loader </li>
</ul>
<p>#####</p>
<h1 id="Ext-类"><a href="#Ext-类" class="headerlink" title="Ext 类"></a>Ext 类</h1><p>Ext  是一个全局单例的对象，在 Sencha library 中它封装了所有的类和许多实用的方法。许多常用的函数都定义在  Ext<br>对象里。它还提供了像其他类中一些频繁使用的方法的快速调用。</p>
<p>我们看一下在  Ext  类中定义的方法和属性：</p>
<h2 id="application-方法"><a href="#application-方法" class="headerlink" title="application 方法"></a>application 方法</h2><p>这里应用是用  Ext.application  方法初始化的。这个方法的参数是一个  Ext.app.Application  对象，这个方法会加载<br>Ext.app.Application  类，并在页面加载完成后开始应用给定的配置。</p>
<p>Ext.app.Application  这个类代表我们的整个应用，这在第1章(入门指南)讲过，讲过的吧？是吧？下面是<br>Ext.app.Application  的使用例子：</p>
<pre><code>Ext.application({   
    name: &apos;MyApp&apos;,   
    extend:&apos;MyApp.Application&apos;,   
    launch: function() {
    }
}) ;
</code></pre><p>上面代码创建一个名为  MyApp  的全局变量。我们的应用里所有的类都将归属于在这样一个命名空间下面。这将降低全局变量产生冲突的可能。</p>
<h2 id="define-方法"><a href="#define-方法" class="headerlink" title="define 方法"></a>define 方法</h2><p>你可以用这个方法定义或者重写一个类。 这个方法有三个参数，如以下代码所示。 在这里  name  参数是你要定义的类名，  data<br>参数是应用于这个类的属性，  callback  是可选参数，这个函数将会在这个类被创建后调用：</p>
<pre><code>Ext.define(name,data, callback)
</code></pre><p>下列代码创建一个名为  Car  的类：  </p>
<pre><code>Ext.define(&apos;Car&apos;, {   
    name: null,
    constructor: function(name) {     
        if (name) {       
            this.name = name;     
        }
    },
    start: function() {     
        alert(&apos;Car started&apos;);
    }
}) ;
</code></pre><p>你还可以使用  define  继承扩展一个类：  </p>
<pre><code>Ext.define(&apos;ElectricCar&apos;, {   
    extend: &apos;Car&apos;,   
    start: function() {
        alert(&quot;Electric car started&quot;);
    }
}) ;
</code></pre><p>如果你想替换一个父类方法的实现，你可以使用  Ext.define  来重写这个方法，如以下代码所示：</p>
<p>#</p>
<pre><code>Ext.define(&apos;My.ux.field.Text&apos;, {   
    override: &apos;Ext.form.field.Text&apos;,   
    setValue: function(val) {     
        this.callParent([&apos;In override&apos;]);     
        return this;
    }
});
</code></pre><p>细心的同学可能发现了当我们继承和重写时使用的属性是不同的，继承我们使用  extend  而重写使用  override<br>，这两者之间有什么区别呢？你一定感到疑惑，这里我非常有必要给你解释清楚，听我慢慢道来。</p>
<p>首先说继承并扩展一个类，这等同于是一个新的类，仍然可以在这个新的类里增加自己独有的方法和属性或者重写父类的方法。</p>
<pre><code>Ext.define(&apos;MyApp.view.main.Test&apos;, {
    extend: &apos;Ext.grid.Panel&apos;,
    xtype: &apos;maintest&apos;,
    title: &apos;Personnel&apos;,
    say:function(){
    alert(123);
    }
});
</code></pre><p>这里我继承了 gridpanel 类，并增加了一个 say方法，以下是输出调用 say 方法的运行结果。</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/1.png" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/1.png" alt="1">
</a></p>
<p>这应该很好理解，Test 继承了 grid panel 之后是一个新的类了，而这里如果创建 Ext.grid.Panel 对象是调用不了 say 方法的。</p>
<p>那么现在我把  extend  改为  override  我们再看一下：</p>
<pre><code>Ext.define(&apos;MyApp.view.main.Test&apos;, {
    override: &apos;Ext.grid.Panel&apos;,//改为 override 了
    xtype: &apos;maintest&apos;,
    title: &apos;Personnel&apos;,
    say:function(){
    alert(123);
    }
});


Ext.define(&apos;MyApp.Application&apos;, {
    extend: &apos;Ext.app.Application&apos;,

    name: &apos;MyApp&apos;,
    requires: [
        &apos;MyApp.view.main.Main&apos;,
    &apos;MyApp.view.main.Test&apos;//我这里引入了 Test 
    ],
    stores: [
        // TODO: add global / shared stores here
    ],

    launch: function () {
       var test = Ext.create(&quot;MyApp.view.main.Test&quot;,{
        title: &apos;Personnel&apos;
       });
       test.say();
    },

    onAppUpdate: function () {
        Ext.Msg.confirm(&apos;Application Update&apos;, &apos;This application has an update, reload?&apos;,
            function (choice) {
                if (choice === &apos;yes&apos;) {
                    window.location.reload();
                }
            }
        );
    }
});
</code></pre><p>运行结果：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/1-1.png" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/1-1.png" alt="1">
</a></p>
<p>我们可以看到我只是简单的把  extend  替换成  override  就报错说不能识别的类名。但是上面我也是引入了它的引用的(requires)，可见<br>extend 和 override 还是有区别的，我们不是重写(override)的是 grid panel 吗？那我们试试创建一个<br>Ext.grid.Panel  对象试试。</p>
<pre><code>Ext.define(&apos;MyApp.Application&apos;, {
    extend: &apos;Ext.app.Application&apos;,

    name: &apos;MyApp&apos;,
    requires: [
        &apos;MyApp.view.main.Main&apos;,
        &apos;MyApp.view.main.Test&apos;
    ],
    stores: [
        // TODO: add global / shared stores here
    ],

    launch: function () {
       //这里改成了 grid panel
       var test = Ext.create(&quot;Ext.grid.Panel&quot;,{
      title: &apos;Personnel&apos;
       });
       test.say();
    },

    onAppUpdate: function () {
        Ext.Msg.confirm(&apos;Application Update&apos;, &apos;This application has an update, reload?&apos;,
            function (choice) {
                if (choice === &apos;yes&apos;) {
                    window.location.reload();
                }
            }
        );
    }
});
</code></pre><p>再次运行结果：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/1-2.png" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/1-2.png" alt="1">
</a></p>
<p>这次正常了，我们使用 Ext.define 定义的类，使用了  override  重写组件，发现并不能新建我们定义的类，而是被重写的父类被新增了 say<br>方法。</p>
<p>所以总结一下，extend 会创建一个新的类，并继承父类的属性和方法，你也可以重写父类的方法。而 override<br>并不会创建一个新的类，而是修改这个被重写的父类。</p>
<ul>
<li>注意：例如上面的例子，Test 重写了 grid panel，我在其他类中创建 grid panel 时如果不引用 Test 那么重写仍然是不生效的。只有引用了 Test 重写才会生效 grid panel 才会具有 say 方法。不要问我为什么。 </li>
</ul>
<p>如果你想创建一个单例类，那么你在定义类时用 singleton 属性，如以下代码所示：</p>
<pre><code>Ext.define(&apos;Logger&apos;, {   
    singleton: true,   
    log: function(msg) {     
        console.log(msg);
    }
}) ;
</code></pre><h2 id="create-对象"><a href="#create-对象" class="headerlink" title="create 对象"></a>create 对象</h2><p>你可以使用下列代码来创建一个类的实例：</p>
<pre><code>Ext.create(Class,Options);
</code></pre><p>下列代码创建了一个  ElectricCar  类的实例，并传递一个值(name)：</p>
<pre><code>var myCar = Ext.create(&apos;ElectricCar&apos;,{     name: &apos;MyElectricCar&apos; }) ;
</code></pre><p>如果  Ext.Loader  是开启的，  Ext.create  执行时如果  ElectricCar  类不存在将会自动的下载对应的 JS 文件。默认<br>Ext.Loader  是开启的；你可以通过以下方式来关闭它。</p>
<pre><code>Ext.Loader.setConfig({  
   enabled: true
});
</code></pre><p>这里你也可以使用 new 关键字来创建一个实例，如以下代码所示；可是如果这个类不存在，使用 new 关键字创建实例并不会自动下载对应的 JS 文件：  </p>
<pre><code>var myCar = new ElectricCar(&apos;MyElectricCar&apos;);
</code></pre><ul>
<li>ps：你只需要掌握使用 Ext.create 创建实例就行了，new 关键字可能是兼容 Ext 3.x 的使用方式而继续支持的。new 关键字官方是不推荐用的。 </li>
</ul>
<h2 id="onReady"><a href="#onReady" class="headerlink" title="onReady"></a>onReady</h2><p>这个函数在页面加载完成后调用：</p>
<pre><code>Ext.onReady(function(){   
    new Ext.Component({     
        renderTo: document.body,     
        html: &apos;DOM ready!&apos;
    });
}) ;
</code></pre><p>大多时候，在你的代码里不会用到  onReady  这个方法，因为 Ext 建议你一个应用就是一个页面(单页式应用)，只有一个页面的话自然没有那么多场景会需<br>要用到。只有在极少数的一些特殊情况，你可能需要用它。这里要强调一点，如果你具有使用 jQuery 的基础，不要把  onReady  方法像 jQuery<br>中的  $( document ).ready()  那样频繁使用。</p>
<h2 id="widget-部件"><a href="#widget-部件" class="headerlink" title="widget (部件)"></a>widget (部件)</h2><p>当定义一个类时，你可以为这个类增加一个便于记忆的别名。例如：  Ext.panel.Panel  的别名为  widget.panel<br>。定义别名时，如以下代码所示指定  alias  属性：</p>
<p>Ext  .  define  (  ‘Ext.panel.Panel’  ,  {</p>
<p>extend  :  ‘Ext.container.Container’  ,</p>
<p>alias  :  ‘widget.panel’  //这里是定义的别名，</p>
<p>}  )  ;</p>
<p>你也可以使用 xtype 为这个类给定一个别名。这个 xtype 是非常有用的，当你以指定 xtype<br>的方式应用部件时，并不会创建实例，而是在真正调用展示的时候才会创建这个类的实例。在本章后面介绍 容器和布局 时你将会学到更多关于 xtype 的使用。</p>
<p>Ext.widget  方法是通过类的 xtype 快速创建部件的。</p>
<p>例如，不使用  widget  方法，你可以通过下列代码创建  Ext.panel.Panel  的实例：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {     
    renderTo: Ext.getBody(),     
    title: &apos;Panel&apos;   
});
</code></pre><p>反之，通过以下方式快速创建 panel 的实例：</p>
<pre><code>Ext.widget(&apos;panel&apos;, {       
    renderTo: Ext.getBody(),     
    title: &apos;Panel&apos;   
});
</code></pre><p>这里 panel 是一个容器，关于 panel 会在后面详细讲解。下面代码的作用相当于与上面：</p>
<pre><code>Ext.create(&apos;widget.panel&apos;, {     
    renderTo: Ext.getBody(),     
    title: &apos;Panel&apos;   
});
</code></pre><p>注意： 你阅读此文档的同时，这里面的大部分代码都是可以运行的，你可以选择在你本地设备上或者在 Sencha Fiddle 上执行这些示例代码。你可以访问<br>Sencha Fiddle  并将上面的代码键入到 launch 函数中，运行并查看结果。如果你访问了  <a href="https://fiddle.sencha.com/" target="_blank" rel="noopener"><br>https://fiddle.sencha.com </a> 将会看到下列代码：</p>
<pre><code>Ext.application({   
    name : &apos;Fiddle&apos;,   
    launch : function() {
        Ext.Msg.alert(&apos;Fiddle&apos;, &apos;Welcome to Sencha Fiddle!&apos;);
    }
}) ;
</code></pre><p>现在，粘贴创建 panel 部件的代码如以下示例，运行并查看结果。复制粘贴时，注意单引号不要写成中文标点单引号：</p>
<pre><code>Ext.application({   
    name : &apos;Fiddle&apos;,   
    launch : function() {
        Ext.create(&apos;widget.panel&apos;, {       
            renderTo: Ext.getBody(),       
            title: &apos;Panel&apos;
        });
    }
}) ;
</code></pre><ul>
<li>不是所有的代码都可以这样运行，此外并非所有的示例代码都会有视觉呈现。 </li>
</ul>
<h2 id="getClass"><a href="#getClass" class="headerlink" title="getClass"></a>getClass</h2><p>如果创建的实例是用 Ext.define 定义的，那么返回这个给定对象的类，否则返回 null：</p>
<pre><code>var button = new Ext.Button(); 
Ext.getClass(button); // returns Ext.Button
</code></pre><h2 id="getClassName"><a href="#getClassName" class="headerlink" title="getClassName"></a>getClassName</h2><p>通过它的引用或实例返回类名称：</p>
<pre><code>Ext.getClassName(Ext.Button); //returns &quot;Ext.Button&quot;
</code></pre><h2 id="Ext-Base"><a href="#Ext-Base" class="headerlink" title="Ext.Base"></a>Ext.Base</h2><p>这是所有  Ext  类的基础。所有的 Ext 类都继承自 Ext.Base。该类所有的原型和静态成员都会传递给继承它的类。</p>
<h2 id="Ext-Class"><a href="#Ext-Class" class="headerlink" title="Ext.Class"></a>Ext.Class</h2><p>这是一个低级别的工厂类，用于通过  Ext.ClassManager  定义一个类。所以不应该在你的代码中直接访问；你应该使用  Ext.define  。</p>
<h2 id="Ext-ClassManager"><a href="#Ext-ClassManager" class="headerlink" title="Ext.ClassManager"></a>Ext.ClassManager</h2><p>它管理所有的类同时处理类反射。通常通过下面几个方法访问：</p>
<ul>
<li>define </li>
<li>create </li>
<li>widget </li>
<li>getClass </li>
<li>getClassName </li>
</ul>
<p>在本章我们已经讨论使用过这些方法。</p>
<h2 id="Ext-Loader"><a href="#Ext-Loader" class="headerlink" title="Ext.Loader"></a>Ext.Loader</h2><p>用于动态的加载依赖。通常使用 Ext.require 来指定依赖。当你定义一个类时，这样指定组件的依赖列表是一个很好的做法，如以下代码所示：</p>
<pre><code>Ext.require([&apos;widget.window&apos;, &apos;layout.border&apos;,&apos;Ext.data.Connection&apos;]);
</code></pre><p>如果你需要引入一个指定命名空间下所有的 组件/类 时，使用通配符，如以下代码所示：  </p>
<pre><code>Ext.require([&apos;widget.*&apos;, &apos;layout.*&apos;, &apos;Ext.data.*&apos;);
</code></pre><p>使用以下语法排除掉不需要的类：</p>
<pre><code>Ext.exclude(&apos;Ext.data.*&apos;).require(&apos;*&apos;);
</code></pre><p>用这种方式，依赖的类是异步加载的。如果在你定义的类中没有指定依赖的类，那么当使用  Ext.Create<br>创建实例时，如果它是未加载的，这时将会同步加载这些类文件。这对性能有一定的影响，所以当你定义类时，使用  Ext.require  指定所需的类总是更好的。</p>
<ul>
<li>requires 属性加载需要的类时，当前类初始化之前被加载。 </li>
<li>uses 属性加载需要的类时，当前类初始化之后被加载。 </li>
<li><code>singleton:true 属性当前类初始化时,该实例是一个单例对象。</code></li>
</ul>
<p>注意：定位类的文件路径是基于类名的。例如：  MyApp.view.About  类的路径应该是  \myapp\view\ about.js  。</p>
<p>Events(事件)</p>
<p>一个事件可以是一个用户操作，一个 Ajax 调用的响应等等。</p>
<h2 id="Adding-listeners-为类添加监听"><a href="#Adding-listeners-为类添加监听" class="headerlink" title="Adding listeners(为类添加监听)"></a>Adding listeners(为类添加监听)</h2><p>当你创建对象或者创建以后都可以为这个对象添加监听器。下列示例代码为这个对象添加了一个 单击事件 的监听：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    renderTo: Ext.getBody(),   
    listeners: {     
        click: function() {
            Ext.Msg.alert(&apos;Button clicked!&apos;);
        }
    }
}) ;
</code></pre><p>你可以添加多个事件监听，如以下代码示例：</p>
<pre><code>Ext.create(&apos;Ext.Button&apos;, {   
    renderTo: Ext.getBody(),   
    listeners: {     
        mouseout: function() {
            //Do something
        },     
        click: function() {       
            // Do something
        }   
    } 
});
</code></pre><p>你也可以在对象创建之后，使用  on  方法为对象添加事件监听：</p>
<pre><code>var button = Ext.create(&apos;Ext.Button&apos;);
button.on(&apos;click&apos;, function() {
   //Do something
}) ;
</code></pre><p>同样的，你也可以使用  on  方法一次添加多个事件的监听，如以下代码示例：  </p>
<pre><code>var button = Ext.create(&apos;Ext.Button&apos;);
button.on({
    mouseover: function() {
        //Do something
    },
    mouseover: function() {
        //Do something
    }
}) ;
</code></pre><h2 id="Removing-listeners-删除事件监听"><a href="#Removing-listeners-删除事件监听" class="headerlink" title="Removing listeners (删除事件监听)"></a>Removing listeners (删除事件监听)</h2><p>You can also remove the listeners, but you need the reference to the function;<br>you can’t use the anonymous function.</p>
<pre><code>var HandleClick= function() {
    Ext.Msg.alert(&apos;My button clicked!&apos;);
}

Ext.create(&apos;Ext.Button&apos;, {   
    listeners: {
       click: HandleClick
    } 
}) ; 

button.un(&apos;click&apos;, HandleClick);
</code></pre><h2 id="页面-DOM-元素的事件处理"><a href="#页面-DOM-元素的事件处理" class="headerlink" title="页面 DOM 元素的事件处理"></a>页面 DOM 元素的事件处理</h2><p>你可以将监听器添加到 DOM 元素，如下所示。</p>
<p>假设在你的 HTML 代码中，有一个  div  元素  id=mydiv  ，如以下代码所示：</p>
<pre><code>&lt; div id=&quot;mydiv&quot;&gt;&lt;/div &gt;
</code></pre><p>用下列代码为它添加事件监听：</p>
<pre><code>var div = Ext.get(&apos;mydiv&apos;);
div.on(&apos;click&apos;, function(e, t, eOpts) {
    // Do something 
});
</code></pre><p>访问 DOM</p>
<p>有三种方法来访问 DOM 元素：  get  ，  query  ，和  select  。</p>
<h2 id="Ext-get"><a href="#Ext-get" class="headerlink" title="Ext.get"></a>Ext.get</h2><p>get 方法是根据这个 DOM 元素的 ID 检索获取并封装为  Ext.dom.Element  对象：</p>
<pre><code>var mydiv = Ext.get(&apos;myDivId&apos;);
</code></pre><h2 id="Ext-query"><a href="#Ext-query" class="headerlink" title="Ext.query"></a>Ext.query</h2><p>这种方式基于传入的 CSS 选择器 从给定的根节点开始查找。它返回一个匹配选择器的元素(  HTMLElement[]/Ext.dom.Element[]<br>)数组。如果没有匹配的，返回一个空值的数组对象。</p>
<p>在下面示例中，  myCustomComponent.getEl().dom  是传递的根节点。  Ext.query<br>将检索这个节点内的子元素，并返回一个数组包含 CSS class 为 ‘  oddRow  ‘ 的的元素：</p>
<pre><code>var someNodes = Ext.query(&apos;.oddRow&apos;, myCustomComponent.getEl().dom);
</code></pre><h2 id="Ext-select"><a href="#Ext-select" class="headerlink" title="Ext.select"></a>Ext.select</h2><p>给出一些 CSS/XPath 选择器，Ext.select 方法返回一个  CompositeElement  类型的对象，代表一个元素的集合。</p>
<p>这个  CompositeElement  对象可以进行过滤，迭代，和对整个集合执行整体操作等等：</p>
<pre><code>var rows = Ext.select(&apos;div.row&apos;); ////Matches all divs with class
row rows.setWidth(100); // 这是设置所有元素的宽度为 100
</code></pre><p>你也可以用一行代码，如下所示：</p>
<pre><code>Ext.select(&apos;div.row&apos;).setWidth(100);
</code></pre><h2 id="多重选择器"><a href="#多重选择器" class="headerlink" title="多重选择器"></a>多重选择器</h2><p>在方法调用时通过指定多个搜索条件可以用来匹配多个元素：</p>
<pre><code>Ext.select(&apos;div.row, span.title&apos;); //匹配所有的 class 用 .row 的 div 元素，和匹配所有 class 用 .title 的 span 元素
</code></pre><h2 id="选择器-根"><a href="#选择器-根" class="headerlink" title="选择器 根"></a>选择器 根</h2><p>当你使用 select ，它默认取 HTML body 作为根并从默认的 body 开始检索整个 DOM<br>树。你可以通过制定一个根元素来避免这种情况，这样它将只搜索给定的根的子节点。</p>
<pre><code>Ext.get(&apos;myEl&apos;).select(&apos;div.row&apos;);
</code></pre><p>这儿使用了 ‘myEl’ 作为根节点。这将首先找到 id 为 ‘myEl’ 的元素，然后将在根元素(myEl)下面搜索出 class 为 ‘row’ 的<br>div 标签。</p>
<pre><code>Ext.select(&apos;div.row&apos;, true, &apos;myEl&apos;);// This is equivalent to the previous line.
</code></pre><h2 id="链式选择器"><a href="#链式选择器" class="headerlink" title="链式选择器"></a>链式选择器</h2><p>下列的查询方式会匹配 class 为 row 并且 title 属性值为 bar 的 div ，这个 div 属于其父元素的首个子元素：</p>
<pre><code>Ext.select(&apos;div.row[title=bar]:first&apos;)
</code></pre><h2 id="Ext-ComponentQuery"><a href="#Ext-ComponentQuery" class="headerlink" title="Ext.ComponentQuery"></a>Ext.ComponentQuery</h2><p>这允许你用 ID，xtype，和 属性查找一个组件。你可以全局搜索或者指定一个根组件。</p>
<p>下列查询将返回所有的 xtype 为  button  的组件：</p>
<pre><code>Ext.ComponentQuery.query(&apos;button&apos;);
</code></pre><p>得到一个 id 为  foo  的组件，用以下代码：</p>
<pre><code>Ext.ComponentQuery.query(&apos;#foo&apos;);
</code></pre><p>下列代码将返回所有的 xtype 为 button 并且 title 属性值为 my button 的组件：</p>
<pre><code>Ext.ComponentQuery.query(&quot;button[title=&apos;my button&apos;]&quot;);; //or parent.query(&apos;textfield[title=my button]&apos;);
</code></pre><p>你也可以使用嵌套选择器如下：You can also use nested selectors as follows:</p>
<pre><code>Ext.ComponentQuery.query(&apos;formpanel numberfield&apos;); // 这里获取 xtype 为 frompanel 下面的 xtype　为 numberfield 的组件
</code></pre><p>下列代码返回这个 parent 容器内匹配传递进来的选择器的第一个直接子组件，如果没有匹配上，返回 null 。</p>
<pre><code>parent.child(&apos;button[itemId=save]&apos;);
</code></pre><p>同样的，你也可以使用其他的方法，例如  nextNode  ,  up  ,  down  ,  previousSibling  等等。</p>
<h2 id="组件，容器，和布局"><a href="#组件，容器，和布局" class="headerlink" title="组件，容器，和布局"></a>组件，容器，和布局</h2><p>Ext JS 提供了一组丰富的组件和布局，这使在 Ext JS 中开发 UI 变得超级简单，甚至非专业 UI 开发人员也能够轻易的使用。</p>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><p>从简单的组件说起，例如 button 和 label ，到复杂的组件，例如 Tree Panel，Grids 等等，Ext JS<br>有大量的内置组件。所有的组件都派生自  Ext.Component  类，它提供支持创建，重绘，渲染和处理组件。</p>
<p>所有的组件都有一个属性叫做  xtype<br>。它是非常有用的，它用在当你不想马上实例化这个组件时，而是想让这个组件在实际被应用时才创建，就是我们俗称的懒加载。</p>
<p>容器</p>
<p>容器是一个特殊的组件类型，它能够持有其他组件。在 Ext JS 中  Ext.container.Container  类是所有的容器的基础类。</p>
<p>Ext.toolbar.Toolbar  ,  Ext.panel.Panel  ,  和  Ext.Editor<br>是一些内置组件。这些组件都是可以包含其他组件。而像  Ext.button.Button  类就不是派生自  Ext.container.Container<br>，所以它不能够包含其他组件。</p>
<p>一个典型的 Ext JS 应用包含一组嵌套的组件。看下面这个例子并思考：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo:Ext.getBody(),   
    width:700,
    height:400,
    items:[{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 1&apos;,
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 2&apos;,     
        height: 200,     
        items: [{
            xtype: &apos;button&apos;,       
            text: &apos;Click Me&apos;
        }]
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 3&apos;,     
        width: 150,     
        height: 100
    }]
});
</code></pre><p>在前面的代码中，这是嵌套的组件，结构如下图所示：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/112.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/112.jpg" alt="1">
</a></p>
<p>上面的代码运行后将输出类似以下截图：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/113.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/113.jpg" alt="1">
</a></p>
<h2 id="布局"><a href="#布局" class="headerlink" title="布局"></a>布局</h2><p>布局定义了包含的组件是如何定位的以及设定组件的尺寸大小。每一个容器都有一个布局。默认布局是 auto 。这将不会为子组件指定任何关于位置和大小的规则。</p>
<p>在上面的图中，你可能已经注意到这些子组件只是一个接一个嵌套在父级容器中。这是在代码中因为我们还没有为这些组件制定任何布局，默认情况下使用的是 auto<br>布局。</p>
<p>现在，让我们在相同的代码里使用一些布局。下列示例中，我们将使用 column 布局和 center 布局。</p>
<p>当你使用 column 布局，你可以指定  columnWidth  。所有的列的  columnWidth  的值的总和必须等于  1<br>。你也可以为一些列指定固定宽度，如以下代码所示。这里，Panel3 取了一个 150 的固定宽度，然后剩下的两列按照  columnWidth<br>的值分配剩下的宽度：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo:Ext.getBody(),   
    width:700,   
    height:400,   
    layout:&apos;column&apos;,   
    items: [{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 1&apos;,     
        columnWidth: 0.4,     
        height: 400,
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 2&apos;,     
        columnWidth: 0.6,     
        layout: &apos;center&apos;,     
        height: 400,     
        items: [{
            xtype: &apos;button&apos;,       
            text: &apos;Click Me&apos;
        }]
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 3&apos;,     
        width: 150,     
        height: 400
    }]
});
</code></pre><p>以上代码输出为：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/114.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/114.jpg" alt="1">
</a></p>
<h2 id="updateLayout"><a href="#updateLayout" class="headerlink" title="updateLayout"></a>updateLayout</h2><p>updateLayout  是  Ext.container.Container<br>对象里的一个方法。这可以用来根据布局规则重新定位子组件。例如你修改了布局方式，需要动态的更新布局时。</p>
<h2 id="suspendLayout"><a href="#suspendLayout" class="headerlink" title="suspendLayout"></a>suspendLayout</h2><p>大多数时候你不会用到这个  updateLayout  方法，然而有些时候你必须调用它。</p>
<p>这个  updateLayout  方法是在你重绘和当你添加或删除了一个组件时自动调用。有时候你可能需要它暂停一下，不是马上就调用，特别是当你添加或删除多个<br>子组件时。所以在这种情况下，你可以设置  suspendLayout  属性为 true ，一旦你完成添加或删除组件的操作，你可以设置<br>suspendLayout  为 false 并在你的代码中手动调用  updateLayout  方法。</p>
<p>同样的如果你想对整个框架停止更新布局，你可以调用  Ext.suspendLayouts()  ，然后在你的操作完成后你可以通过调用<br>Ext.resumeLayouts(true)  恢复它。</p>
<p>以下是 Ext JS 中可用的布局：</p>
<ul>
<li>absolute </li>
<li>accordion </li>
<li>anchor </li>
<li>border </li>
<li>card </li>
<li><p>center </p>
</li>
<li><p>column </p>
</li>
<li>fit </li>
<li>hbox </li>
<li>table </li>
<li>vbox </li>
</ul>
<h2 id="absolute-绝对布局"><a href="#absolute-绝对布局" class="headerlink" title="absolute 绝对布局"></a>absolute 绝对布局</h2><p>这个布局使用 x 和 y 属性来指定组件的绝对定位：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo:Ext.getBody(),   
    width:700,   
    height:400,   
    layout:&apos;absolute&apos;,   
    items: [{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 1&apos;,     
        x: 12,     
        y: 20,     
        height: 250
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 2&apos;,     
        x: 200,     
        y: 150,     
        height: 200
    },{     
        xtype: &apos;panel&apos;,     
        title: &apos;Panel 3&apos;,     
        x: 400,     
        y: 250,     
        width: 150,     
        height: 100
    }]
});
</code></pre><p>这里所示的输出，你可以重叠组件因为他们用绝对位置定位的：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/115.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/115.jpg" alt="1">
</a></p>
<h2 id="accordion-手风琴-可折叠-布局"><a href="#accordion-手风琴-可折叠-布局" class="headerlink" title="accordion 手风琴(可折叠)布局"></a>accordion 手风琴(可折叠)布局</h2><p>这个布局展示了在一个时间里只有一个内置的可支持折叠和展开的子级 panel 。瞧一下以下示例：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,   
    height: 400,   
    layout: &apos;accordion&apos;,   
    items: [{
        title: &apos;Item 1&apos;,
        html: &apos;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&apos;
    },{
        title: &apos;Item 2&apos;,     
        html: &apos;some content here&apos;
    },{
        title: &apos;Item 3&apos;,     
        html: &apos;empty&apos;
    }] 
});
</code></pre><p>这里显示的输出，这个  Item 1  是展开的，而其他的 panel 是折叠的：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/116.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/116.jpg" alt="1">
</a></p>
<h2 id="anchor-锚点布局"><a href="#anchor-锚点布局" class="headerlink" title="anchor 锚点布局"></a>anchor 锚点布局</h2><p>这个布局使你能够指定子级组件的大小，而这是相对于布局容器的。首先容器根据指定的锚点规则调整然后所有的子级组件再作调整：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,
    height: 400,   
    layout: &apos;anchor&apos;,   
    items: [{     
        title: &apos;Item 1&apos;,     
        html: &apos;Item 1&apos;,     
        anchor: &apos;50%&apos;
    },{     
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;,     
        anchor: &apos;-20 -200&apos;
    },{     
        title: &apos;Item 3&apos;,     
        html: &apos;Item 3&apos;,     
        anchor: &apos;-200&apos;
    }]
});
</code></pre><p>输入如以下截图：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/117.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/117.jpg" alt="1">
</a></p>
<p>####</p>
<h2 id="border-布局"><a href="#border-布局" class="headerlink" title="border 布局"></a>border 布局</h2><p>这个布局允许你为子组件指定一个区域位置，例如 center，north，south，west 和 east。当你使用 border<br>布局时，在其内的组件必须有一个指定区域为 center，如下列代码所示：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,   
    height: 400,   
    layout: &apos;border&apos;,
    items: [{     
        title: &apos;Item 1&apos;,     
        html: &apos;Item 1&apos;,     
        region: &apos;center&apos;
    },{     
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;,     
        region: &apos;east&apos;,     
        width: 200
    },{     
        title: &apos;Item 3&apos;,     
        html: &apos;Item 3&apos;,     
        region: &apos;south&apos;,     
        height: 100
    }] 
}) ;
</code></pre><p>以上代码输出类似下列视图：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/118.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/118.jpg" alt="1">
</a></p>
<h2 id="card-卡片布局"><a href="#card-卡片布局" class="headerlink" title="card 卡片布局"></a>card 卡片布局</h2><p>在此布局中，只有一个子组件是可见的，这个组件基本上充满整个容器。卡片布局一般应用在向导或者 tabs：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,   
    height: 400,   
    layout: &apos;card&apos;,   
    defaultListenerScope: true,   
    bbar: [&apos;-&gt;&apos;,{
        itemId: &apos;btn-prev&apos;,     
        text: &apos;Previous&apos;,     
        handler: &apos;showPrevious&apos;,     
        disabled: true
    },{
        itemId: &apos;btn-next&apos;,     
        text: &apos;Next&apos;,     
        handler: &apos;showNext&apos;
    }],   
    items: [{     
        index: 0,     
        title: &apos;Item 1&apos;,     
        html: &apos;Item 1&apos;
    },{     
        index: 1,     
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;
    },{     
        index:2,     
        title: &apos;Item 3&apos;,     
        html: &apos;Item 3&apos;
    }],
    showNext: function () {     
        this.navigate(1);
    },
    showPrevious: function () {     
        this.navigate(-1);
    },
    navigate: function (incr) {     
        var layout = this.getLayout();     
        var index = layout.activeItem.index + incr;     
        layout.setActiveItem(index);
        this.down(&apos;#btn-prev&apos;).setDisabled(index===0);     
        this.down(&apos;#btn-next&apos;).setDisabled(index===2);
    }
});
</code></pre><p>卡片布局的输出。当你点击 next 按钮，将会显示 Item 2 面板：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/119.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/119.jpg" alt="1">
</a></p>
<h2 id="center-中心布局"><a href="#center-中心布局" class="headerlink" title="center 中心布局"></a>center 中心布局</h2><p>这种布局，容器的子组件在中间。在本章中开始介绍布局的部分，我们已经有一个例子了。</p>
<h2 id="column-列布局"><a href="#column-列布局" class="headerlink" title="column 列布局"></a>column 列布局</h2><p>用此布局，你可以将容器划分为指定数量的列并指定每列所占的大小。这个例子也在本章开始介绍布局的部分中可以找到。</p>
<h2 id="fit-适配布局"><a href="#fit-适配布局" class="headerlink" title="fit 适配布局"></a>fit 适配布局</h2><p>在此布局中，子组件将会自适应容器的尺寸。如下：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,
    height: 400,   
    layout: &apos;fit&apos;,   
    bodyPadding: 20,   
    items: [{
        title: &apos;Item 1&apos;,
        html: &apos;Fills the container&apos;,
    }]
});
</code></pre><p>下列截图展示以上代码的输出。注意：Item 1 组件与父级容器之间的空隙是我们指定了  bodyPadding  属性：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/120.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/120.jpg" alt="1">
</a></p>
<h2 id="hbox-布局"><a href="#hbox-布局" class="headerlink" title="hbox 布局"></a>hbox 布局</h2><p>这种布局与 column 布局几乎是一样的，但是这种布局允许你拉伸列的高度。这里使用 flex 选项为子组件设置水平的相对值：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,   
    height: 400,   
    layout:{     
        type: &apos;hbox&apos;,     
        pack: &apos;start&apos;,     
        align: &apos;stretch&apos;,
    },
    items: [{
        title: &apos;Item 1&apos;,
        html: &apos;Item 1&apos;,    
        flex: 1
    },{
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;,     
        width: 100
    },{
        title: &apos;Item 3&apos;,     
        html: &apos;Item 3&apos;,     
        flex: 2
    }] 
});
</code></pre><p>上面代码输出：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/121.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/121.jpg" alt="1">
</a></p>
<h2 id="table-表格布局"><a href="#table-表格布局" class="headerlink" title="table 表格布局"></a>table 表格布局</h2><p>这个布局允许你渲染一个表格出来。你可以指定列数和行数，使用  rowspan  和  colspan  创建复杂布局：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,
    height: 400,   
    layout:{     
        type: &apos;table&apos;,     
        columns: 3,     
        tableAttrs: {       
            style: {         
                width: &apos;100%&apos;
            }
        }
    },   
    items: [{     
        rowspan: 3,     
        title: &apos;Item 1&apos;,     
        html: &apos;Item 1&apos;
    },{     
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;
    },{     
        title: &apos;Item 3&apos;,     
        rowspan: 2,     
        html: &apos;Item 3&apos;
    },{     
        title: &apos;Item 4&apos;,     
        html: &apos;Item 4&apos;
    },{     
        title: &apos;Item 5&apos;,     
        html: &apos;Item 5&apos;
    },{     
        title: &apos;Item 6&apos;,     
        html: &apos;Item 6&apos;
    },{     
        title: &apos;Item 7&apos;,     
        html: &apos;Item 7&apos;
    }]
});
</code></pre><p>以下截图所示为前面 table 布局代码的输出结果：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/122.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/122.jpg" alt="1">
</a></p>
<h2 id="VBox-布局"><a href="#VBox-布局" class="headerlink" title="VBox 布局"></a>VBox 布局</h2><p>这个布局内，子组件是垂直向下一个接一个排列。看一下以下的示例代码：</p>
<pre><code>Ext.create(&apos;Ext.panel.Panel&apos;, {   
    renderTo: Ext.getBody(),   
    width: 700,   
    height: 400,   
    layout:{     
        type: &apos;vbox&apos;,     
        pack: &apos;start&apos;,     
        align: &apos;stretch&apos;,
    },   
    items: [{
        title: &apos;Item 1&apos;,     
        html: &apos;Item 1&apos;,     
        flex: 1
    },{
        title: &apos;Item 2&apos;,     
        html: &apos;Item 2&apos;,     
        height: 100
    },{
        title: &apos;Item 3&apos;,     
        html: &apos;Item 3&apos;,
        flex: 2
    }]
});
</code></pre><p>这段代码所示的输出：</p>
<p><a href="http://www.jeeboot.com/wp-content/uploads/2015/12/123.jpg" target="_blank" rel="noopener"> <img src="http://www.jeeboot.com/wp-content/uploads/2015/12/123.jpg" alt="1">
</a></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>在本章中，我们了解学习了在 Ext JS 中的基础类和这些类中常用的方法，你还学习了如何创建和扩展一个类。还有如何使用 事件 和 查询元素及组件的功能。</p>
<p>在下一章，我们将会看一看许多有用的组件，例如 buttons ，menus ，toolbars 等等。我们也将根据所学创建一个小型的计算器应用。</p>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">


    <div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">分享到：</a>
    <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间">QQ空间</a>
    <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博">新浪微博</a>
    <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博">腾讯微博</a>
    <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网">人人网</a>
    <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信">微信</a>
</div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
<style>
    .bdshare_popup_box {
        border-radius: 4px;
        border: #e1e1e1 solid 1px;
    }
    .bdshare-button-style0-16 a,
    .bdshare-button-style0-16 .bds_more {
        padding-left: 20px;
        margin: 6px 10px 6px 0;
    }
    .bdshare_dialog_list a,
    .bdshare_popup_list a,
    .bdshare_popup_bottom a {
        font-family: 'Microsoft Yahei';
    }
    .bdshare_popup_top {
        display: none;
    }
    .bdshare_popup_bottom {
        height: auto;
        padding: 5px;
    }
</style>


</div>

            
    
        <a href="https://www.itchina.top/2018/04/20/Ext JS 6学习文档–第2章–核心概念/#comments" id="sourceId::2018/04/20/Ext JS 6学习文档–第2章–核心概念/" class="article-comment-link cy_cmt_count">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/2018/04/20/Ext JS 6学习文档-第3章-基础组件/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    Ext JS 6学习文档-第3章-基础组件
                
            </div>
        </a>
    
    
        <a href="/2018/04/20/Ext JS 6学习文档–第1章–ExtJS入门指南/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">Ext JS 6学习文档–第1章–ExtJS入门指南</div>
        </a>
    
</nav>


    
</article>


    
    
        <section id="comments">
    <div id="SOHUCS" sid="2018/04/20/Ext JS 6学习文档–第2章–核心概念/"></div>
</section>
    

</section>
            
                
<aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="no-thumbnail">
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/IDE/">IDE</a></p>
                            <p class="item-title"><a href="/2018/04/20/项目相关的CVS操作/" class="title">项目相关的CVS操作</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.467Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/J2EE/">J2EE</a></p>
                            <p class="item-title"><a href="/2018/04/20/图片转换PDF文件/" class="title">图片转换PDF文件</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.449Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/categories/Spring/">Spring</a></p>
                            <p class="item-title"><a href="/2018/04/20/使用 Spring Data JPA 简化 JPA 开发/" class="title">使用 Spring Data JPA 简化 JPA 开发</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.448Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2018/04/20/通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法/" class="title">通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.448Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/2018/04/20/面试感悟----一名3年工作经验的程序员应该具备的技能/" class="title">面试感悟----一名3年工作经验的程序员应该具备的技能</a></p>
                            <p class="item-date"><time datetime="2018-04-19T16:34:21.447Z" itemprop="datePublished">2018-04-20</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/ActiveMQ/">ActiveMQ</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/ExtJs/">ExtJs</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/J2EE/">J2EE</a><span class="category-list-count">7</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/J2EE/Spring/">Spring</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/Linux/">Linux</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Redis/">Redis</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/Spring/">Spring</a><span class="category-list-count">21</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/cnn图片数据处理、显示/">cnn图片数据处理、显示</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/cnn图片数据处理、显示/python数据分析/">python数据分析</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/web前端/">web前端</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/数据库/">数据库</a><span class="category-list-count">3</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/数据库/集群/">集群</a><span class="category-list-count">1</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/集群/">集群</a><span class="category-list-count">2</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2018/04/">四月 2018</a><span class="archive-list-count">65</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Apache/">Apache</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Docker/">Docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Druid/">Druid</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ImageToPDF/">ImageToPDF</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Logstash/">Logstash</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Spring-Boot/">Spring Boot</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/activemq/">activemq</a><span class="tag-list-count">7</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ajax/">ajax</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/angular/">angular</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/cas/">cas</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/docker/">docker</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/exception/">exception</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ext/">ext</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/extjs/">extjs</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/find/">find</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/github/">github</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ide/">ide</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/idea/">idea</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/java/">java</a><span class="tag-list-count">5</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/javascript/">javascript</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jboss/">jboss</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jmx/">jmx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jpa/">jpa</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/linux/">linux</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/lombok/">lombok</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mvc/">mvc</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mybatis/">mybatis</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/mysql/">mysql</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/nginx/">nginx</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/numpy/">numpy</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/seo/">seo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/server/">server</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/shiro/">shiro</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring/">spring</a><span class="tag-list-count">17</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring-mvc/">spring mvc</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/spring-boo/">spring-boo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/sql-server/">sql server</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/windows/">windows</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/zookeeper/">zookeeper</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/优化/">优化</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/分布式日志/">分布式日志</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/多线程/">多线程</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/工作/">工作</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/异常/">异常</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/异常处理/">异常处理</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/搜索引擎/">搜索引擎</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据分析/">数据分析</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/汉字转拼音/">汉字转拼音</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/版本控制系统/">版本控制系统</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/程序员/">程序员</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/经验/">经验</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/集群/">集群</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/面试/">面试</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/tags/Apache/" style="font-size: 10px;">Apache</a> <a href="/tags/Docker/" style="font-size: 10px;">Docker</a> <a href="/tags/Druid/" style="font-size: 10px;">Druid</a> <a href="/tags/ImageToPDF/" style="font-size: 10px;">ImageToPDF</a> <a href="/tags/Logstash/" style="font-size: 10px;">Logstash</a> <a href="/tags/Spring-Boot/" style="font-size: 10px;">Spring Boot</a> <a href="/tags/activemq/" style="font-size: 18px;">activemq</a> <a href="/tags/ajax/" style="font-size: 10px;">ajax</a> <a href="/tags/angular/" style="font-size: 10px;">angular</a> <a href="/tags/cas/" style="font-size: 10px;">cas</a> <a href="/tags/docker/" style="font-size: 10px;">docker</a> <a href="/tags/exception/" style="font-size: 10px;">exception</a> <a href="/tags/ext/" style="font-size: 14px;">ext</a> <a href="/tags/extjs/" style="font-size: 14px;">extjs</a> <a href="/tags/find/" style="font-size: 10px;">find</a> <a href="/tags/git/" style="font-size: 10px;">git</a> <a href="/tags/github/" style="font-size: 10px;">github</a> <a href="/tags/ide/" style="font-size: 12px;">ide</a> <a href="/tags/idea/" style="font-size: 10px;">idea</a> <a href="/tags/java/" style="font-size: 16px;">java</a> <a href="/tags/javascript/" style="font-size: 12px;">javascript</a> <a href="/tags/jboss/" style="font-size: 10px;">jboss</a> <a href="/tags/jmx/" style="font-size: 10px;">jmx</a> <a href="/tags/jpa/" style="font-size: 10px;">jpa</a> <a href="/tags/linux/" style="font-size: 14px;">linux</a> <a href="/tags/lombok/" style="font-size: 10px;">lombok</a> <a href="/tags/mvc/" style="font-size: 10px;">mvc</a> <a href="/tags/mybatis/" style="font-size: 10px;">mybatis</a> <a href="/tags/mysql/" style="font-size: 12px;">mysql</a> <a href="/tags/nginx/" style="font-size: 10px;">nginx</a> <a href="/tags/numpy/" style="font-size: 10px;">numpy</a> <a href="/tags/seo/" style="font-size: 10px;">seo</a> <a href="/tags/server/" style="font-size: 10px;">server</a> <a href="/tags/shiro/" style="font-size: 12px;">shiro</a> <a href="/tags/spring/" style="font-size: 20px;">spring</a> <a href="/tags/spring-mvc/" style="font-size: 10px;">spring mvc</a> <a href="/tags/spring-boo/" style="font-size: 10px;">spring-boo</a> <a href="/tags/sql-server/" style="font-size: 10px;">sql server</a> <a href="/tags/windows/" style="font-size: 10px;">windows</a> <a href="/tags/zookeeper/" style="font-size: 10px;">zookeeper</a> <a href="/tags/优化/" style="font-size: 12px;">优化</a> <a href="/tags/分布式日志/" style="font-size: 10px;">分布式日志</a> <a href="/tags/多线程/" style="font-size: 10px;">多线程</a> <a href="/tags/工作/" style="font-size: 10px;">工作</a> <a href="/tags/异常/" style="font-size: 10px;">异常</a> <a href="/tags/异常处理/" style="font-size: 10px;">异常处理</a> <a href="/tags/搜索引擎/" style="font-size: 12px;">搜索引擎</a> <a href="/tags/数据分析/" style="font-size: 10px;">数据分析</a> <a href="/tags/汉字转拼音/" style="font-size: 10px;">汉字转拼音</a> <a href="/tags/版本控制系统/" style="font-size: 10px;">版本控制系统</a> <a href="/tags/程序员/" style="font-size: 10px;">程序员</a> <a href="/tags/经验/" style="font-size: 10px;">经验</a> <a href="/tags/集群/" style="font-size: 10px;">集群</a> <a href="/tags/面试/" style="font-size: 10px;">面试</a>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a href="http://www.baidu.com">百度</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>

            
        </div>
        <!--google 底部广告 -->
<div style="width:100%;text-align: center;clear: both;margin-bottom: 20px;" class="hidden-xs">
    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 博客footer上方的广告 -->
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-8254913025324557"
         data-ad-slot="3369473724"
         data-ad-format="auto"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>
<footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy;2018 - 2018&nbsp; LErry Li &nbsp;版权所有<br>
			<a href="http://www.miitbeian.gov.cn">沪ICP备17054498号-3</a>
        </div>
    </div>
</footer>
        
    
    <script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cytxPSIHr"></script>
    <script charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/changyan.js" ></script>
    <script type="text/javascript">
    window.changyan.api.config({
    appid: 'cytxPSIHr',
    conf: 'prod_3c92d05d8ba4377e48c5fe27c2159761'
    });
    </script>




    
        <script src="/libs/lightgallery/js/lightgallery.min.js"></script>
        <script src="/libs/lightgallery/js/lg-thumbnail.min.js"></script>
        <script src="/libs/lightgallery/js/lg-pager.min.js"></script>
        <script src="/libs/lightgallery/js/lg-autoplay.min.js"></script>
        <script src="/libs/lightgallery/js/lg-fullscreen.min.js"></script>
        <script src="/libs/lightgallery/js/lg-zoom.min.js"></script>
        <script src="/libs/lightgallery/js/lg-hash.min.js"></script>
        <script src="/libs/lightgallery/js/lg-share.min.js"></script>
        <script src="/libs/lightgallery/js/lg-video.min.js"></script>
    
    
        <script src="/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>
    
    



<!-- Custom Scripts -->
<script src="/js/main.js"></script>

    </div>
</body>
</html>